<template>
	<view class="home">
		<!-- 动态生成表格 -->
		<view style="width: 96%; margin: 15rpx; background-color: white; border-radius: 15rpx">
			<view style="padding-top: 40rpx; padding-bottom: 10rpx; padding-left: 40rpx">
				<wd-icon name="/static/images/my/student_icon.png" size="25" />
				<wd-text text="学生总人数" style="margin-left: 15rpx" size="28rpx" />
			</view>
			<!-- <wd-text :text="`${resData.totalStudents}人`" style="margin-left: 100rpx" size="40rpx" color="#000000"
				bold /> -->
			<text style="margin-left: 100rpx; font-size: 40rpx; font-weight: bold; color: #000000">
				{{ resData.totalStudents }}人
			</text>
			<view class="charts-box">
				<qiun-data-charts type="column" :opts="opts" :chartData="chartData" :ontouch="true">
				</qiun-data-charts>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, onMounted } from 'vue'
	import { statForExamApi } from '@/service/my/index'
	import color from '@/uni_modules/uview-plus/libs/config/color'

	const chartData = ref<any>()

	const props = defineProps({
		id: String,
	})

	const resData = ref<any>()

	const opts = ref<any>()

	const getStatForExam = async () => {
		try {
			const params = { examPlanId: props.id }
			const res : any = await statForExamApi(params)
			console.info("------>" + res.data)
			if (res?.code === 200) {
				resData.value = res.data
				chartData.value = JSON.parse(
					JSON.stringify({
						categories: res.data.xData,
						series: [
							{
								data: res.data.yData
							},
						],
					}),
				)
				let max = Math.max.apply(null, res.data.yData)
				setOpts(max)
				// let columnFormatDemo = JSON.parse(
				// 	JSON.stringify({
				// 		categories: res.data.xData,
				// 		series: [
				// 			{
				// 				data: res.data.yData
				// 			},
				// 		],
				// 	}),
				// )
				// for (var i = 0; i < columnFormatDemo.series.length; i++) {
				// 	columnFormatDemo.series[i].format = '10个'
				// }
				// chartData.value = columnFormatDemo
			} else {
				console.error('')
			}
		} catch (error) {
			uni.showToast({
				title: '获取课程详情失败',
				icon: 'none',
			})
		}
	}

	function setOpts(max : number) {
		opts.value = {
			color: ["#1890FF"],

			padding: [15, 15, 0, 5],

			enableScroll: true,
			legend: {
				show: false,
				position: 'top',
				float: 'left',
				padding: 20
			},
			xAxis: {
				disableGrid: false,
				gridColor: '#F6F6F6',
				scrollShow: false,
				itemCount: 5,
			},
			yAxis: {
				splitNumber: max > 10 ? 10 : 1,
				gridColor: '#F6F6F6',
				data: [
					{
						type: String,
						min: 0,
						max: max,
					}
				]
			},
			extra: {
				column: {
					customColor: ["#1890FF"],
					linearType: "custom",
					width: 15,
					activeBgColor: "#000000",
					activeBgOpacity: 0.05,
					barBorderCircle: true,
					barBorderRadius: [10, 10, 0, 0]
				},
				tooltip: {
					showBox: false
				}
			}
		}
	}

	onLoad(() => {
		getStatForExam()
	})
</script>

<style scoped>
	.charts-box {
		width: 100%;
		height: 350px;
		margin-top: 20rpx;
	}

	.home {
		/* 样式可以根据需要调整 */
	}
</style>
